<template>
     <el-drawer v-model="drawerVisible" :destroy-on-close="true" :show-close="false" :before-close="handleClose" size="300px">
        <template #header="{ titleId, titleClass }">
            <h4 :id="titleId" :class="titleClass">主题定制</h4>
            <el-button link @click="handleClose">
                <el-icon :size="30">
                    <i-ep-Close />
                </el-icon>
            </el-button>
        </template>
        <el-divider class="divider" content-position="center">
            <el-icon>
                <i-ep-Notification />
            </el-icon>
			布局切换
        </el-divider>
        <div class="layout-box">
            <el-tooltip effect="dark" content="纵向" placement="top" :show-after="200">
                <div :class="['layout-item layout-vertical', themeConfig.layout === 'vertical' ? 'is-active' : '']" @click="changeLayout('vertical')">
                    <div class="layout-dark"></div>
					<div class="layout-container">
						<div class="layout-light"></div>
						<div class="layout-content"></div>
					</div>
                    <!-- 选中的勾 -->
                    <el-icon v-if="themeConfig.layout == 'vertical'">
                        <i-ep-CircleCheckFilled />
                    </el-icon>
                </div>
            </el-tooltip>
            <el-tooltip effect="dark" content="经典" placement="top" :show-after="200">
                <div :class="['layout-item layout-classic', themeConfig.layout === 'classic' ? 'is-active' : '']" @click="changeLayout('classic')">
                    <div class="layout-dark"></div>
					<div class="layout-container">
						<div class="layout-light"></div>
						<div class="layout-content"></div>
					</div>
                    <el-icon v-if="themeConfig.layout == 'classic'">
                        <i-ep-CircleCheckFilled />
                    </el-icon>
                </div>
            </el-tooltip>
            <!-- <el-tooltip effect="dark" content="横向" placement="top" :show-after="200">
                <div :class="['layout-item layout-transverse', themeConfig.layout === 'transverse' ? 'is-active' : '']" @click="changeLayout('transverse')">
                    <div class="layout-dark"></div>
					<div class="layout-content"></div>
                    <el-icon v-if="themeConfig.layout == 'transverse'">
                        <i-ep-CircleCheckFilled />
                    </el-icon>
                </div>
            </el-tooltip>
            <el-tooltip effect="dark" content="分栏" placement="top" :show-after="200">
                <div :class="['layout-item layout-columns', themeConfig.layout === 'columns' ? 'is-active' : '']" @click="changeLayout('columns')">
                    <div class="layout-dark"></div>
                    <div class="layout-light"></div>
					<div class="layout-content"></div>
                    <el-icon v-if="themeConfig.layout == 'columns'">
                        <i-ep-CircleCheckFilled />
                    </el-icon>
                </div>
            </el-tooltip> -->
        </div>
        <el-divider class="divider" content-position="center">
            <el-icon>
                <i-ep-ColdDrink />
            </el-icon>
			全局主题
        </el-divider>
        <div class="theme-item">
            <span>主题颜色</span>
            <el-color-picker v-model="themeConfig.primary" :predefine="predefineColors" @change="changePrimaryColor" />
        </div>
        <div class="theme-item">
            <span>暗黑模式</span>
            <SwitchDark />
        </div>
        <div class="theme-item">
            <span>灰色模式</span>
            <el-switch v-model="themeConfig.isGrey" @change="changeGreyOrWeak($event, 'grey')"></el-switch>
        </div>
        <div class="theme-item">
            <span>色弱模式</span>
            <el-switch v-model="themeConfig.isGrey" @change="changeGreyOrWeak($event, 'weak')"></el-switch>
        </div>
        <el-divider class="divider" content-position="center">
            <el-icon>
                <i-ep-Setting />
            </el-icon>
			界面设置
        </el-divider>
        <div class="theme-item">
			<span>折叠菜单</span>
			<el-switch v-model="themeConfig.isCollapse" />
		</div>
		<div class="theme-item">
			<span>面包屑</span>
			<el-switch v-model="themeConfig.breadcrumb" />
		</div>
		<div class="theme-item">
			<span>面包屑图标</span>
			<el-switch v-model="themeConfig.breadcrumbIcon" />
		</div>
		<div class="theme-item">
			<span>标签栏</span>
			<el-switch v-model="themeConfig.tabs" />
		</div>
		<div class="theme-item">
			<span>标签栏图标</span>
			<el-switch v-model="themeConfig.tabsIcon" />
		</div>
  </el-drawer>
</template>
<script setup>
import mittBus from '@/utils/mittBus'
import { ref, onMounted, computed } from '@vue/runtime-core'
import { useStore } from 'vuex';
import { DEFAULT_PRIMARY } from '@/config/themeConfig'
import { useTheme } from '@/hooks/useTheme'
import SwitchDark from './SwitchDark/index.vue'

const drawerVisible = ref(false)
const store = useStore()

const themeConfig = reactive(computed(() => {
    return store.getters['theme/getThemeConfig']
}))
const predefineColors = ref([
    DEFAULT_PRIMARY,
    "#DAA96E",
	"#0C819F",
	"#409EFF",
	"#27ae60",
	"#ff5c93",
	"#e74c3c",
	"#fd726d",
	"#f39c12",
	"#9b59b6",
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)',
    '#c7158577'
])

const { changePrimaryColor, changeGreyOrWeak} = useTheme()
const handleClose = () => {
    drawerVisible.value = false
}
const changeLayout = (mode) => {
    store.commit('theme/setThemeConfig', {...themeConfig.value, layout: mode})
}
onMounted(() => {
    mittBus.on('openThemeDrawer', () => (drawerVisible.value = true))
})
</script>
<style lang="scss" scoped>
.divider {
    margin-top: 15px;
    .el-icon {
        position: relative;
        top: 2px;
        right: 5px;
        font-size: 15px;
    }
}
.layout-box{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 10px 0 0 ;
    .layout-item {
        position: relative;
        box-sizing: border-box;
        width: 95px;
        height: 67px;
        padding: 6px;
        margin-bottom: 20px;
        cursor: pointer;
        border-radius: 5px;
        box-shadow: 0 0 5px 1px  #363637;
        transition: all 0.2s;
        .layout-dark {
            background-color: #409eff;
            border-radius: 3px;
        }
        .layout-light {
            background-color: #2a598a;
            border-radius: 3px;
        }
        .layout-content {
            background-color: #1d3043;
			border: 1px dashed #409eff;
			border-radius: 3px;
        }
        .el-icon {
            position: absolute;
			right: 10px;
			bottom: 10px;
			color: #409eff;
			transition: all 0.2s;
        }
        &:hover {
			box-shadow: 0 0 5px 1px #636466;
		}
    }
    .is-active {
		box-shadow: 0 0 0 2px #409eff !important;
	}
    .layout-vertical{
        display: flex;
        justify-content: space-between;
        .layout-dark {
			width: 20%;
		}
		.layout-container {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 72%;
			.layout-light {
				height: 20%;
			}
			.layout-content {
				height: 67%;
			}
		}
    }
    .layout-classic{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .layout-dark {
            height: 22%;
        }
        .layout-container {
            display: flex;
            justify-content: space-between;
            height: 70%;
            .layout-light {
                width: 20%;
            }
            .layout-content {
                width: 70%;
            }
        }
    }
    // .layout-transverse{
    //     display: flex;
    //     flex-direction: column;
    //     justify-content: space-between;
    //     .layout-dark {
    //         height: 20%;
    //     }
    //     .layout-content {
    //         height: 67%;
    //     }
    // }
    // .layout-columns{
    //     display: flex;
    //     justify-content: space-between;
    //     .layout-dark {
    //         width: 14%;
    //     }
    //     .layout-light {
    //         width: 17%;
    //     }
    //     .layout-content {
    //         width: 55%;
    //     }
    // }
}
.theme-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0;
    span{
        font-size: 14px;
    }
}
</style>